<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="./css/demo.css">
    <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body,
        html {
            height: 100%
        }

        .wrap {
            width: 100%;
            height: 100%;
            background: url("http://erp.mdbos.com/views/assets/img/bg/9.jpg") no-repeat 0 -200px;
            background-size: cover;
            background-attachment: fixed;
            padding-top: 150px;
            padding-left: 800px;
        }

        .wrap .panel-body {
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class="wrap">

        <h2>管理员登录</h2>
        <p>This example shows how to custom a login form.</p>
        <div style="margin:20px 0;"></div>
        <div class="easyui-panel" title="Login to system" style="width:400px;padding:30px 70px 20px 70px">
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" id="username" style="width:100%;height:40px;padding:12px" data-options="prompt:'Username',iconCls:'icon-man',iconWidth:38">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" type="password" id="password" style="width:100%;height:40px;padding:12px" data-options="prompt:'Password',iconCls:'icon-lock',iconWidth:38">
            </div>
            <div>
                <input type="checkbox" checked="checked">
                <span>Remember me</span>
            </div>
            <div style="margin:5px">
                <span style="color:tomato;font-weight: 700" class="tips"></span>
            </div>
            <div>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:100%;">
                    <span style="font-size:14px;">Login</span>
                </a>
            </div>
        </div>
    </div>

    <script>
        $(".easyui-linkbutton").on("click", function() {
            if ($("#username").val().length > 0 && $("#password").val().length > 0) {
                $.ajax({
                    type: "post",
                    url: "http://10.31.162.112:3000/admin/find",
                    data: {
                        name: $("#username").val(),
                        password: $("#password").val()
                    }
                }).done(function(data) {
                    if (data.length > 0) {
                        $(".tips").html("");
                        location.href = "index.html";
                        localStorage.username = data[0].name;
                        $("input").val("");
                    } else {
                        $(".tips").html("用户名或密码不正确!");
                    }
                })
            } else {
                $(".tips").html("用户名或密码不能为空!");
            }
        })
    </script>

</body>

</html>